<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link href="/css/bianji.css" rel="stylesheet" type="text/css">
    </link>
</head>

<body>
    <div class="leftback" id="left">
        <div class="orderJuzao">
            <div class="orderJuzaoText">ORDER聚造</div>
            <img class="mulu" src="/image/mulu.png" alt="">
        </div>
        <div class="shouye">
            <img  src="/image/home.png" alt="">
            <div class="shouyeText">首页</div>
        </div>
        <div class="xtsz">
            <img src="/image/xtsj.png" alt="">
            <div class="shouyeText">系统设置</div>
            <img  class="jt" src="/image/jt.png" alt="">
        </div>
        <div class="xtsz1">
            <div class="xtsz1Text"  v-for="(item,index) in data1" @click="changeindex(index)" :class="{active:index==isShow}">
                {{item.xuanze}}
            </div>
        </div>
    </div>
    <div class="rightback" id="right">
            <div class="right1">
                <div class="xtszAndrygl">系统设置 / 人员管理</div>
                <img src="./image/touxiang.png" class="touxiang">
                <div class="rightText">超级管理员</div>
                <div class="rightText1">小王，您好！</div>
                <div class="rightText2">
                    <img src="./image/tc.png" class="tc">
                    <div class="rightText22">退出</div>
                </div>
            </div>
            <div class="right2">
                <div class="right2back">
                    <div class="rigth2back1">
                        <div class="rigth2back2">
                            <div class="css1">
                                <div class="css2">活动名称</div>
                                <input type="text" class="css3">
                            </div>
                            <div class="css1">
                                <div class="css2">活动区域</div>
                                <input type="text" class="css3" placeholder="请选择活动区域">
                                <img src="./image/jt.png" class="jt">
                            </div>

                            <div class="css1">
                                <div class="css2">活动时间</div>
                                <div class="rq">
                                    <img src="./image/rq.png" class="rq1">
                                    <input type="text" placeholder="请选择日期" class="rq11">
                                </div>
                                <div style="margin-top: 10px;margin-left: 30px;">-&nbsp;</div>
                                <div class="rq">
                                    <img src="./image/shijian.png" class="rq1">
                                    <input type="text" placeholder="请选择时间" class="rq11">
                                </div>
                            </div>

                            <div class="css1">
                                <div class="css2">及时配送</div>
                                <div class="qiehuan"><div class="qiehuan1"></div></div>
                            </div>

                            <div class="css4">
                                <div class="css2">活动性质</div>
                                <ul class="b">
                                    <li v-for="(item,index) in actives" >
                                      <input class="a" type="checkBox" name="active">
                                      <label >{{item}}</label>
                                    </li>
                                </ul>
                            </div>

                            <div class="css1">
                                <div class="css2">特殊资源</div>
                                <ul class="c">
                                    <li v-for="(item,index) in resources" >
                                        <input class="a" type="radio" name="resource">
                                        <label >{{item}}</label>
                                    </li>
                                </ul>
                            </div>

                            <div class="css4">
                                <div class="css2">活动测试</div>
                                <textarea cols="25" rows="5" class="e"></textarea>
                            </div>
                        </div>

                        
                        <div class="right212">
                            <div class="css1">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">活动名称</div>
                                <input type="text" class="css3">
                            </div>

                            <div class="css1">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">活动区域</div>
                                <input type="text" class="css3" placeholder="请选择活动区域">
                                <img src="./image/jt.png" class="jt">
                            </div>

                            <div class="css1">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">活动时间</div>
                                <div class="rq">
                                    <img src="./image/rq.png" class="rq1">
                                    <input type="text" placeholder="请选择日期" class="rq11">
                                </div>
                                <div style="margin-top: 25px;">&nbsp;&nbsp;&nbsp;-&nbsp;</div>
                                <div class="rq">
                                    <img src="./image/shijian.png" class="rq1">
                                    <input type="text" placeholder="请选择时间" class="rq11">
                                </div>
                            </div>

                            <div class="css1">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">及时配送</div>
                                <div class="qiehuan"><div class="qiehuan1"></div></div>
                            </div>

                            <div class="css4">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">活动性质</div>
                                <ul class="b">
                                    <li v-for="(item,index) in actives" >
                                      <input class="a" type="checkBox" name="active">
                                      <label >{{item}}</label>
                                    </li>
                                </ul>
                            </div>

                            <div class="css1">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">特殊资源</div>
                                <ul class="c">
                                    <li v-for="(item,index) in resources" >
                                        <input class="a" type="radio" name="resource">
                                        <label >{{item}}</label>
                                    </li>
                                </ul>
                            </div>

                            <div class="css4">
                                <img src="./image/xx.png" class="xx">
                                <div class="css2">活动测试</div>
                                <textarea cols="25" rows="5" class="e"></textarea>
                            </div>             
            </div>
            <div class="qxbc">
                <div class="qx">保存</div>
                <div class="bc">取消</div> 
            </div>   
    </div>
</body>

</html>


<script>
    
    var app = new Vue({
        el:'#left',
        data:{
            isShow:-1,//激活状态，-1为未激活
            data1: [
                {xuanze:'单位管理'},
                {xuanze:'权限管理'},
                {xuanze:'菜单设置'},
                {xuanze:'人员管理'}
            ],
            
        },

        methods:{
            changeindex(index){
                console.log(index);
                this.isShow = index
            }
    }
    })


    var app1 = new Vue({
        el:'#right',
        data:{
            actives:[
                '美食/餐厅线上活动',
                '地推活动',
                '线下主题活动',
                '单纯品牌曝光'
            ],
            resources:[
                '线上品牌赞助',
                '线下场地免费'
            ],
        }
    })
</script>